<template>
  <div class="system-date-modal">
    <div class="real-time">
      <div class="time">{{ dateFormat('hh:mm:ss', settingStore.$state.currentDate) }}</div>
      <div class="lunar-calendar" @click="handleToToday">
        {{ dateFormat('YYYY年MM月DD日', settingStore.$state.currentDate) }}
      </div>
    </div>
    <div class="calendar">
      <dl class="date-title">
        <dt>{{ currentYear }}年{{ currentMonth + 1 }}月</dt>
        <dd>
          <i class="iconfont wos-to-top" @click="handleCheckMonth('prev')" />
          <i class="iconfont wos-to-bottom" @click="handleCheckMonth('next')" />
        </dd>
      </dl>
      <dl class="calendar-list">
        <dt v-for="item in weekList" :key="item">{{ item }}</dt>
        <dd
          v-for="item in calendarList"
          :key="item.id"
          :class="{ 'current-month': item.isCurrentMonth, 'current-day': item.isCurrentDay }"
        >
          <div class="calendar-list-inner">
            <span>{{ item.day }}</span>
            <span class="fs10">{{ item.lunar }}</span>
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue'
import { Calendar } from '@/utils/lunarCalendar'
import { useI18n } from 'vue-i18n'
import { dateFormat, randomWord } from '@/utils/utils'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'

interface ICalendar {
  readonly id: string
  readonly day: number
  readonly date: string
  readonly isCurrentDay: boolean
  readonly isCurrentMonth: boolean
  readonly lunar: string
}

const calendarLength = 6 * 7
const i18n = useI18n()
const settingStore = useSystemSettingStore()
const calendarList = ref<ICalendar[]>([])
const currentMonth = ref<number>(new Date(settingStore.$state.currentDate).getMonth())
const currentYear = ref<number>(new Date(settingStore.$state.currentDate).getFullYear())
const weekList = computed(() => [
  i18n.t('calendar.week.sunday'),
  i18n.t('calendar.week.monday'),
  i18n.t('calendar.week.tuesday'),
  i18n.t('calendar.week.wednesday'),
  i18n.t('calendar.week.thursday'),
  i18n.t('calendar.week.friday'),
  i18n.t('calendar.week.saturday')
])

// 获取某天是周几
const getDayOfWeek = (month: number, year: number): number => new Date(year, month, 1).getDay()
// 获取某月总天数
const getMonthDays = (month: number, year: number): number => new Date(year, month + 1, 0).getDate()
// 获取上个月总天数
const getPervMonthDays = (month: number, year: number): { pervMonth: number; pervYear: number; dayCount: number } => {
  const newMonth = month - 1 >= 0 ? month - 1 : 11
  const newYear = month - 1 >= 0 ? year : year - 1
  return {
    pervMonth: newMonth,
    pervYear: newYear,
    dayCount: getMonthDays(newMonth, newYear)
  }
}
// 初始化日历
const initCalendar = () => {
  calendarList.value = []
  const lastMonthLen = getDayOfWeek(currentMonth.value, currentYear.value)
  const currentDays = getMonthDays(currentMonth.value, currentYear.value)
  const today = dateFormat('YYYY-MM-DD')
  for (let i = 0; i < calendarLength; i++) {
    if (i < lastMonthLen) {
      const { dayCount, pervMonth, pervYear } = getPervMonthDays(currentMonth.value, currentYear.value)
      const day = dayCount - lastMonthLen + i + 1
      const { IDayCn } = Calendar.solar2lunar(pervYear, pervMonth + 1, day)
      const date = dateFormat('YYYY-MM-DD', new Date(pervYear, pervMonth + 1, day))
      calendarList.value.push({
        id: randomWord(10, 'calendar-'),
        day: day,
        date: date,
        isCurrentDay: false,
        isCurrentMonth: false,
        lunar: IDayCn
      })
    } else if (i >= lastMonthLen && i <= lastMonthLen + currentDays - 1) {
      const day = i - lastMonthLen + 1
      const { IDayCn } = Calendar.solar2lunar(currentYear.value, currentMonth.value + 1, day)
      const date = dateFormat('YYYY-MM-DD', new Date(currentYear.value, currentMonth.value, day))
      calendarList.value.push({
        id: randomWord(10, 'calendar-'),
        day: i - lastMonthLen + 1,
        date: date,
        isCurrentDay: date === today,
        isCurrentMonth: true,
        lunar: IDayCn
      })
    } else {
      const day = i - lastMonthLen - currentDays + 1
      const month = currentMonth.value + 1 > 11 ? 0 : currentMonth.value + 1
      const year = currentMonth.value + 1 > 11 ? currentYear.value + 1 : currentYear.value
      const { IDayCn } = Calendar.solar2lunar(year, month + 1, day)
      const date = dateFormat('YYYY-MM-DD', new Date(year, month, day))
      calendarList.value.push({
        id: randomWord(10, 'calendar-'),
        day: day,
        date: date,
        isCurrentDay: false,
        isCurrentMonth: false,
        lunar: IDayCn
      })
    }
  }
}
// 切换月份
const handleCheckMonth = (type: 'prev' | 'next') => {
  type === 'prev' ? currentMonth.value-- : currentMonth.value++
  if (currentMonth.value < 0) {
    currentYear.value--
    currentMonth.value = 11
  } else if (currentMonth.value > 11) {
    currentYear.value++
    currentMonth.value = 0
  }
  initCalendar()
}
// 跳转当天
const handleToToday = () => {
  currentYear.value = settingStore.$state.currentDate.getFullYear()
  currentMonth.value = settingStore.$state.currentDate.getMonth()
  initCalendar()
}

onBeforeMount(() => {
  initCalendar()
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';

$date-modal-width: 360px;
$calendar-width: 46px;
$calendar-height: 42px;
$calendar-padding: 0 calc(($date-modal-width - $calendar-width * 7 - 2px * 6) / 2);

.system-date-modal {
  width: $date-modal-width;
  color: var(--task-bar-color);
  background-color: var(--task-modal-bg-color);
  border-top: 1px solid var(--task-modal-border-color);
  border-left: 1px solid var(--task-modal-border-color);

  .real-time {
    box-sizing: border-box;
    height: 110px;
    padding: 28px 20px;
    border-bottom: 1px solid var(--task-modal-divider-color);

    .time {
      font-size: 38px;
      font-weight: 300;
      line-height: 1;
    }

    .lunar-calendar {
      font-size: 14px;
    }
  }

  .calendar {
    .date-title {
      padding: $calendar-padding;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: $calendar-height;
      line-height: $calendar-height;

      dt {
        height: $calendar-height;
        font-size: 14px;
        padding-left: 10px;
      }

      dd {
        text-align: center;

        i {
          display: inline-block;
          width: $calendar-width;
          height: $calendar-height;
        }
      }
    }

    .calendar-list {
      padding: $calendar-padding;
      display: flex;
      flex-wrap: wrap;

      dt,
      dd {
        width: $calendar-width;
        height: $calendar-height;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-bottom: 2px;
        margin-right: 2px;

        &:nth-of-type(7n) {
          margin-right: 0;
        }
      }

      dd {
        border: 2px solid transparent;
        font-size: 14px;
        color: var(--sub-font);

        &.current-month {
          color: var(--base-font);
        }

        &.current-day {
          border-color: var(--theme-color);

          .calendar-list-inner {
            color: #fff;
            background-color: var(--theme-color);
          }
        }

        &:hover {
          border-color: #ccc;
        }

        .calendar-list-inner {
          margin: 2px;
          width: calc(100% - 4px);
          height: calc(100% - 4px);
          line-height: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
